<template>
  <div>
    <el-select style="width: 100%"
               v-bind="$attrs"
               @input="handleInput">
      <el-option v-for="item in options"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"
                 @click.native="labelOn(item.label)">
      </el-option>
    </el-select>
  </div>
</template>

<script>
import numUnit from "./numUnit.js";
export default {
  name: "PriceUnit",
  props: {
    priceUnit: {
      type: [String, Number],
      default: () => null
    },
    chargeMode: {
      type: [String, Number],
      default: () => null
    },
  },
  data () {
    return {
      weightUnit: [
        {
          value: 1,
          label: "公斤"
        },
        {
          value: 2,
          label: "吨"
        }
      ],
      volumeUnit: [
        {
          value: 3,
          label: "立方米"
        },
        {
          value: 4,
          label: "升"
        }
      ],
      selectedValue: null,
      numUnit: numUnit.price
    };
  },
  watch: {
    chargeMode: {
      immediate: true,
      handler (val) {
        this.options = [];
        if (this.isAll) return;
        if (val == 1) {
          this.options = this.weightUnit;
        } else if (val == 2) {
          this.options = this.volumeUnit;
        } else if (val == 3) {
          this.options = this.numUnit;
        } else {
          this.options = this.options.concat(
            this.weightUnit,
            this.volumeUnit,
            this.numUnit
          );
        }
        let unit = null;
        let arr = this.options.filter((item) => {
          return item.value === this.$attrs.value;
        });
        if (!arr.length) {
          if (val === 2) {
            unit = 3;
            this.labelOn("立方米");
          } else if (val === 1) {
            unit = 1;
            this.labelOn("公斤");
          } else if (val === 3) {
            unit = 5;
            this.labelOn("个");
          }
        } else {
          unit = this.$attrs.value;
        }
        this.handleInput(unit);
        // this.$emit('update:value', unit)
      }
    }
  },
  methods: {
    handleInput (value) {
      this.selectedValue = value;
      this.$emit("input", value);
    },
    labelOn (e) {
      this.$emit("label", e);
    }
  }
};
</script>
